<template>
  <div class="icon-list-container">
    <div v-for="(item, index) in listData" :key="index" class="icon-list-item">
      <!-- 左侧圆形图标 -->
      <div class="icon-circle" :style="{ backgroundColor: item.color }">
        {{ item.iconText }}
      </div>

      <!-- 右侧文字内容 -->
      <div class="text-content">
        <div class="value" style="color: #3de7c9;">{{ item.value }}</div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    listData: {
      type: Array,
      required: true,
      validator: (data) => data.every(item => 'value' in item && 'label' in item && 'iconText' in item && 'color' in item)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-list-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px; // 项之间的间距
}

.icon-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Arial', sans-serif;
}

.icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0; // 防止缩放
}

.text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.label {
  font-size: 12px;
  color: #b0b0b0;
}
</style>
